<template>
	<view class="cxy-tab-bar"  :style="{ backgroundColor: dynamicColor }">
		<view v-for="(item,index) in listAll" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
			<image class="tab_img" :src="userIdentity === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: userIdentity === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>
<script setup>
	import { onLoad, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	const showAnimate = ref(false)
	const color = ref("#666666")
	const selectedColor = ref('#212121')
	const listAll = ref([])
	const themetype = uni.getStorageSync('themeInfo')?.type
   
    // 使用 props 中的 userIdentity
	const props = defineProps({
		// tabbar坐标
		userIdentity: {
		type: Number,
		default: 0
		}
	});
   
   const dynamicColor = ref('#fff')  //底部导航背景色
	onLoad((options) => {
		if (themetype == '001') {
			selectedColor.value = '#FE0190' //选中颜色
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/home.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/qnig/tabr_icon/home-Active.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/coupon.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/qnig/tabr_icon/coupon-Active.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/order.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/qnig/tabr_icon/order-Active.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/my.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/qnig/tabr_icon/my-Active.png",
					text: "我的"
				}
			]

		} else if (themetype == '002') {
			dynamicColor.value = '#464d3d'
			selectedColor.value = '#ffffff' //选中颜色
			color.value = '#cccccc'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_home.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_home.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_coupon.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_coupon.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_order.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_order.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_my.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_my.png",
					text: "我的"
				}
			]
		}  else if (themetype == '003') {
			dynamicColor.value = '#1A0B01'
			selectedColor.value = '#CBAB83' //选中颜色
			color.value  = '#66543D'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/home.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/home-Active.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/coupon.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/coupon-Active.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/order.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/order-Active.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/my.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/zttt/tabr-icon/my-Active.png",
					text: "我的"
				}
			]
		} else if (themetype == '004') {
			dynamicColor.value = '#000000'
			selectedColor.value = '#FFFFFF' //选中颜色
			color.value  = '#666666'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/home.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/home-Active.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/coupon.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/coupon-Active.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/order.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/order-Active.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/my.png",
					selectedIconPath: "https://oss.jtmckj.com/h5-uniapp/tgx/tabr-icon/my-Active.png",
					text: "我的"
				}
			]
		} else if (themetype == '005') {
			dynamicColor.value = '#191922'
			selectedColor.value = '#FFFFFF' //选中颜色
			color.value  = '#666666'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/home.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/home-Active.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/coupon.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/coupon-Active.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/order.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/order-Active.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/my.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/ch/home/my-Active.png",
					text: "我的"
				}
			]
		} else if (themetype == '006') {
			dynamicColor.value = '#191922'
			selectedColor.value = '#D0AD87' //选中颜色
			color.value  = '#8E8E96'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/home.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_s_home.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/coupon.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_s_coupon.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/order.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_s_order.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://oss.jtmckj.com/h5-uniapp/blanKarea/tabr-icon/my.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/common/i_s_my.png",
					text: "我的"
				}
			]
		} else if (themetype == '007') {
			selectedColor.value = '#FFFFFF' //选中颜色
			color.value  = '#ccc'
			dynamicColor.value = '#0D0D0D'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_home.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_home.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_coupon.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_coupon.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_order.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_order.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_my.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_my.png",
					text: "我的"
				}
			]
		} else if (themetype == '008') {
			dynamicColor.value = '#0d0d0d'
			selectedColor.value = '#ffffff' //选中颜色
			color.value = '#cccccc'
			listAll.value = [{
					centerItem: false,
					pagePath: "/pages/home/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_home.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_home.png",
					text: "首页"
				},
				{
					centerItem: false,
					pagePath: "/pages/coupon/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_coupon.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_coupon.png",
					text: "优惠券"
				},
				{
					centerItem: false,
					pagePath: "/pages/order/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_order.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_order.png",
					text: "订单"
				},
				{
					centerItem: false,
					pagePath: "/pages/my/index",
					iconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_my.png",
					selectedIconPath: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/kbq/newshome/i_s_my.png",
					text: "我的"
				}
			]
		} 

	});
		
	const  switchTab = (item, index)=> {
			let url = item.pagePath;
			uni.switchTab({
			   url:url
			})
	}
	
</script>

<style lang="scss" scoped>
	.sub-img {
		width: 60rpx;
		height: 60rpx;
	}

	.tab-popup-view {
		margin-left: calc(50vw - 275rpx);
		width: 550rpx;
		height: 228rpx;
		position: absolute;
		bottom: 174rpx;
	}

	.tab-popup-img {
		margin-left: calc(50vw - 275rpx);
		width: 550rpx;
		height: 228rpx;
		position: absolute;
		bottom: 174rpx;
	}

	.popup-title {
		height: 31rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.tab_img_big_rotate {
		// width: 86rpx;
		// height: 86rpx;
		width: 72rpx;
		height: 72rpx;
		transform: rotate(45deg);
	}

	.tab_img_big {
		// width: 86rpx;
		// height: 86rpx;
		width: 72rpx;
		height: 72rpx;
	}

	.cxy-tab-bar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				// width: 37rpx;
				// height: 41rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>